<template>
	<div id="Basic_Settings">
		<el-form label-width="120px">
			<el-row>
				<el-col :offset="0" :span="16">
					<el-form-item label="活动标题:" :required="true">
						<el-input v-model="form.name" placeholder="请输入活动标题" class="handle-input mr10"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :offset="0" :span="16">
					<el-form-item label="活动时间:" :required="true">
						<el-date-picker
							style="width: 100%"
							v-model="form.value1"
							type="datetimerange"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							:default-time="['00:00:00']"
						>
						</el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :offset="0" :span="16">
					<el-form-item label="参与人数:">
						<el-radio v-model="form.radio1" label="1">隐藏</el-radio>
						<el-radio v-model="form.radio1" label="2">展示</el-radio>
						<span class="iconfont icon-wenhaoxiao icon-wenhaoxiao1" style="font-size: 18px; color: red; cursor: pointer">
							<i>可以选择是否在抽奖页展示方便引导用户进行抽奖</i>
						</span>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :offset="0" :span="16">
					<el-form-item label="参与人数限制:">
						<el-radio v-model="form.radio2" label="1">不限</el-radio>
						<el-radio v-model="form.radio2" label="2">限制</el-radio>
						<div v-if="form.radio2 == 2" style="display: inline-block">
							<el-input style="width: 100px" v-model="form.name"> </el-input>
							<span style="font-size: 12px; margin-left: 5px">人参与</span>
						</div>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :offset="0" :span="16">
					<el-form-item label="活动规则:">
						<el-radio v-model="form.radio3" label="1">文本说明</el-radio>
						<el-radio v-model="form.radio3" label="2" disabled>图文说明</el-radio>
						<el-input
							v-if="form.radio3 == 1"
							style="width: 100%"
							maxlength="10000"
							show-word-limit
							type="textarea"
							:rows="10"
							placeholder="请输入文本内容"
							v-model="form.textarea"
						>
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :offset="0" :span="16">
					<el-form-item label="">
						<el-button @click="handleResetForm">重置</el-button>
						<el-button @click="handleSubmit" type="primary">保存</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				form: {}
			};
		},
		methods: {
			handleResetForm() {
				this.form = {};
			},
			handleSubmit() {}
		}
		// watch: {
		//     $route: {
		//         deep: true,
		//         immediate: true,
		//         handler: function (a, b) {
		//             console.log(a, b);
		//         }
		//     }
		// }
	};
</script>
<style  lang='scss'>
	#Basic_Settings {
		// .el-form-item__content{
		//     margin-left: 150px;
		// }
		.el-radio {
			margin-right: 10px;
		}
		.el-form-item__label {
			color: #000;
		}
		.icon-wenhaoxiao1 {
			i {
				display: none;
			}
			&:hover i {
				display: inline-block;
				font-style: normal;
				font-size: 12px;
				font-weight: bold;
				margin-left: 5px;
				vertical-align: middle;
				background-color: rgba(11, 124, 223, 0.94);
				width: auto;
				padding: 0 5px 0;
				box-sizing: border-box;
				line-height: 25px;
				color: #fff;
				position: relative;
				left: 5px;
				top: -6px;
				border-radius: 4px;
				&::after {
					content: '';
					position: absolute;
					left: -16px;
					width: 0px;
					height: 0px;
					border: transparent solid;
					border-width: 8px;
					border-right-color: #0b7cdff0;
					top: 6px;
				}
			}
		}
	}
</style>